<template>
  <view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
    <!-- <TopBar /> -->
    <HeadCustom ref="HeadCustom" :isSpace="false" :isCircle="true" :isBlur="false" :isBack="isApp" :isOpeninstall="true" :isChange="!isApp"></HeadCustom>
    <view class="download-wrap fboxCol Ycenter">
      <image class="bg" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download.png" mode="widthFix">
        <image class="img-download download-1" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-1.png" mode=""></image>
        <image class="img-download download-2" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-2.png" mode=""></image>
        <image class="img-download download-3" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-3.png" mode=""></image>
        <image class="img-download download-4" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-4.png" mode=""></image>
        <image class="img-download download-5" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-5.png" mode=""></image>
        <image class="img-download download-6" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-6.png" mode=""></image>
        <image class="img-download download-7" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/download-7.png" mode=""></image>

        <template v-if="!isApp">
          <DownloadBtn type="download" color="#3b6efe" :isOpeninstall="true" ref="download_btn" />
        </template>
        <view v-else class="btn fboxRow Ycenter Xcenter font32" @click="goBack()">返回</view>
        <!-- <view class="btn color-fff font30 fboxRow Ycenter Xcenter" @click="goCopy" v-else>
          点击复制链接在浏览器中打开
        </view> -->
    </view>
  </view>
</template>

<script>
import DownloadBtn from '@/components/download-btn-h5/download_btn.vue';
export default {
  components: {
    DownloadBtn
  },
  data() {
    return {
      theme: getApp().globalData.appTheme,
      globalColor: getApp().globalData.globalColor,
      // url: '',
      isApp: false,
      linkData: {}
    }
  },
  onLoad(option) {
    if(option && option.isApp){
      this.isApp = true;
    }
  },
  methods: {
    goCopy(){
      uni.setClipboardData({
        data: 'hello',
        success: function () {
          console.log('success');
        }
      });
    },
    goBack(){
      this.$refs.HeadCustom.backTap()
    }
  }
}
</script>

<style lang="scss" scoped>
.download-wrap {
  position: relative;
  min-height: calc(100vh);
  background: #fff no-repeat top center;
  /* background: #fff url("~@/assets/img/bg-download.jpg") no-repeat top center; */
  background-size: 750rpx 100%;
  max-width: 750rpx;
}
.img-download{position: absolute;}
.download-1{width: 41rpx;height: 60rpx;top:935rpx;left: 674rpx;-webkit-animation:pic12frames 5s infinite;animation:pic12frames 5s infinite;}
.download-4{width: 48rpx;height: 71rpx;top: 551rpx;left: 609rpx;-webkit-animation:pic12frames 5s infinite;animation:pic12frames 5s infinite;}
.download-5{width: 41rpx;height: 60rpx;top:985rpx;left: 43rpx;-webkit-animation:pic12frames 5s infinite;animation:pic12frames 5s infinite;}
.download-6{width: 55rpx;height: 75rpx;top:214rpx;left: 492rpx;-webkit-animation:pic12frames 5s infinite;animation:pic12frames 5s infinite;}
.download-7{width: 49rpx;height: 71rpx;top:894rpx;left: 560rpx;-webkit-animation:pic12frames 5s infinite;animation:pic12frames 5s infinite;}

.download-2{width: 100rpx;height: 134rpx;top:599rpx;left: 442rpx;opacity: 0; -webkit-transform:scale(0);transform: scale(0);animation:joinLead4frames 5s infinite;}
.download-3{width: 112rpx;height: 119rpx;top:683rpx;left: 167rpx;opacity: 0; -webkit-transform:scale(0);transform: scale(0);animation:joinLead3frames 5s infinite;}
// -webkit-animation:pic3frames 5s infinite;
// animation:pic3frames 5s infinite;-webkit-transform: translateY(0) scale(1);transform:translateY(0) scale(1);}
@-webkit-keyframes pic12frames{
  0% {-webkit-transform: translateY(-10rpx);transform: translateY(-10rpx);}
  50% {-webkit-transform: translateY(10rpx);transform: translateY(10rpx);}
  100% {-webkit-transform: translateY(-10rpx);transform: translateY(-10rpx);}
}

@keyframes pic12frames{
  0% {-webkit-transform: translateY(-10rpx);transform: translateY(-10rpx);}
  50% {-webkit-transform: translateY(10rpx);transform: translateY(10rpx);}
  100% {-webkit-transform: translateY(-10rpx);transform: translateY(-10rpx);}
}
@-webkit-keyframes pic3frames{
  0% {-webkit-transform: translateY(0);transform:translateY(0);}
  50% {-webkit-transform: translateY(20rpx) scale(.8);transform:translateY(20rpx)  scale(.8);}
  100% {-webkit-transform: translateY(0);transform:translateY(0);}
}
@keyframes pic3frames{
  0% {-webkit-transform: translateY(0);transform:translateY(0);}
  50% {-webkit-transform: translateY(20rpx) scale(.8);transform:translateY(20rpx)  scale(.8);}
  100% {-webkit-transform: translateY(0);transform:translateY(0);}
}
@keyframes joinLead4frames{
  0% {opacity: 0}
  25%{opacity: 1; -webkit-transform:scale(1);transform: scale(1);}
  100%{opacity: 1}
}
@keyframes joinLead3frames{
  0% {opacity: 0}
  50%{opacity: 1; -webkit-transform:scale(1);transform: scale(1);}
  100%{opacity: 1}
}





.bg {
  width: 750rpx;
  height: auto;
}
.logo {
  padding: 30rpx 0;
  width: 112rpx;
  height: 120rpx;
}

.logo img {
  width: 112rpx;
  height: 120rpx;
}

.download-wrap .title {
  margin-top: 50rpx;
  padding: 0 38rpx;
  color: #09363c;
  line-height: 60rpx;
}

.download-wrap .btn {
  position: fixed;
  bottom: 60rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 560rpx;
  height: 88rpx;
  background: #f0bd42;
  box-shadow: 0px 0px 30rpx 0px rgba(13, 32, 2, 0.2);
  border-radius: 44rpx;
  cursor: pointer;
  border:0 none;
}
.space {
  height: 200rpx;
}

.QrCode {
  width: 570rpx;
  height: 556rpx;
  background-color: #fff;
  overflow: hidden;
  border-radius: 28rpx;
}

.QrCode .bd {
  margin: 50rpx 0 30rpx;
}

.QrCode .code {
  width: 300rpx;
  height: 300rpx;
  overflow: hidden;
}

.color-2E2E33 {
  color: #2e2e33;
}

.color-8B8B99 {
  color: #8b8b99;
}

.download-wrap ::v-deep .van-popup {
  background: none;
}

.close {
  margin-top: 60rpx;
}

.close .bksIcon {
  font-size: 60rpx;
}
</style>
